@import url(./base.less);
@import url(./normalize.less);

@rootSize: 37.5rem;

body {
  background-color: #f9fbff;
}
.main {
  height: (60 / @rootSize);
  margin-bottom: (10 / @rootSize);
  background-color: #fff;
  .box {
    height: (20 / @rootSize);
    margin: 0 auto;
  }

  .box1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: (11.5 / @rootSize) (10 / @rootSize);
    height: (45 / @rootSize);

    .le {
      width: (20 / @rootSize);
      height: (25 / @rootSize);
      margin-top: (5 / @rootSize);
      margin-left: (10 / @rootSize);
    }

    .left {
      font-size: (16 / @rootSize);
      padding-left: (50 / @rootSize);
      font-weight: 600;
    }

    .right {
      width: (79 / @rootSize);
      height: (7.1 / @rootSize);
      padding-bottom: (30 / @rootSize);
    }
  }
}
.yuer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 (35 / @rootSize);
  width: (356 / @rootSize);
  height: (103 / @rootSize);
  background-color: #fff;
  margin-bottom: (10 / @rootSize);
  div p {
    font-size: (14 / @rootSize);
    color: #535353;
    span {
      display: inline-block;
      margin-right: (100 / @rootSize);
      width: (62 / @rootSize);
      height: (20 / @rootSize);
      background-color: #363636;
      border-radius: (6 / @rootSize) (6 / @rootSize) (6 / @rootSize) 0;
      font-size: (12 / @rootSize);
      color: #f0d393;
      text-align: center;
      line-height: (20 / @rootSize);

      img {
        display: inline-block;
        width: (15 / @rootSize);
        height: (10 / @rootSize);
      }
    }
  }
  p:last-child {
    font-size: (12 / @rootSize);
    margin-top: (9 / @rootSize);
    a {
      color: #aaaaaa;
    }
  }
}
.task {
  height: (610 / @rootSize);
  background-color: #fff;
  padding: 0 (33 / @rootSize);

  .task1 {
    height: (66 / @rootSize);
    line-height: (91 / @rootSize);
    font-size: (16 / @rootSize);
  }
  .task2 {
    display: flex;
    height: (91 / @rootSize);
    justify-content: space-between;
    align-items: center;
    border-bottom: (1 / @rootSize) solid #ebebeb;
    p:first-child {
      font-size: (14 / @rootSize);
      color: #535353;
      margin-bottom: (6 / @rootSize);
    }
    p:last-child {
      font-size: (12 / @rootSize);
      color: #aaa;
      span {
        color: #535353;
      }
    }
    div:last-child {
      width: (80 / @rootSize);
      height: (31 / @rootSize);
      border: (1 / @rootSize) solid #353535;
      border-radius: (15.5 / @rootSize);
      font-size: (14 / @rootSize);
      color:  #353535;
      text-align: center;
      line-height: (31 / @rootSize);
    }
  }
  .task3 {
    display: flex;
    height: (91 / @rootSize);
    justify-content: space-between;
    align-items: center;
    border-bottom: (1 / @rootSize) solid #ebebeb;
    p:first-child {
      font-size: (14 / @rootSize);
      color: #535353;
      margin-bottom: (6 / @rootSize);
    }
    p:last-child {
      font-size: (12 / @rootSize);
      color: #aaa;
      span {
        color: #535353;
      }
    }
    div:last-child {
      width: (80 / @rootSize);
      height: (31 / @rootSize);
      border: (1 / @rootSize) solid #353535;
      border-radius: (15.5 / @rootSize);
      font-size: (14 / @rootSize);
      color:  #353535;
      text-align: center;
      line-height: (31 / @rootSize);
    }
  }
  .task4 {
    display: flex;
    height: (91 / @rootSize);
    justify-content: space-between;
    align-items: center;
    border-bottom: (1 / @rootSize) solid #ebebeb;
    p:first-child {
      font-size: (14 / @rootSize);
      color: #535353;
      margin-bottom: (6 / @rootSize);
    }
    p:last-child {
      font-size: (12 / @rootSize);
      color: #aaa;
    }
  }
  .task5 {
    display: flex;
    height: (91 / @rootSize);
    justify-content: space-between;
    align-items: center;
    border-bottom: (1 / @rootSize) solid #ebebeb;
    p:first-child {
      font-size: (14 / @rootSize);
      color: #535353;
      margin-bottom: (6 / @rootSize);
    }
    p:last-child {
      font-size: (12 / @rootSize);
      color: #aaa;
      span {
        color: #535353;
      }
    }
  }
  .task6 {
    display: flex;
    height: (91 / @rootSize);
    justify-content: space-between;
    align-items: center;
    border-bottom: (1 / @rootSize) solid #ebebeb;
    p:first-child {
      font-size: (14 / @rootSize);
      color: #535353;
      margin-bottom: (6 / @rootSize);
    }
    p:last-child {
      font-size: (12 / @rootSize);
      color: #aaa;
      span {
        color: #535353;
      }
    }
  }
  .task7 {
    display: flex;
    height: (91 / @rootSize);
    justify-content: space-between;
    align-items: center;
    border-bottom: (1 / @rootSize) solid #ebebeb;
    p:first-child {
      font-size: (14 / @rootSize);
      color: #535353;
      margin-bottom: (6 / @rootSize);
    }
    p:last-child {
      font-size: (12 / @rootSize);
      color: #aaa;
      span {
        color: #535353;
      }
    }
  }
}
.mission{
  height: (249 / @rootSize);
  background-color: #fff;
  padding: 0 (33 / @rootSize);

  .task1 {
    height: (66 / @rootSize);
    line-height: (91 / @rootSize);
    font-size: (16 / @rootSize);
  }
  .task2 {
    display: flex;
    height: (91 / @rootSize);
    justify-content: space-between;
    align-items: center;
    border-bottom: (1 / @rootSize) solid #ebebeb;
    p:first-child {
      font-size: (14 / @rootSize);
      color: #535353;
      margin-bottom: (6 / @rootSize);
    }
    p:last-child {
      font-size: (12 / @rootSize);
      color: #aaa;
      span {
        color: #535353;
      }
    }
    div:last-child {
      width: (80 / @rootSize);
      height: (31 / @rootSize);
      border-radius: (15.5 / @rootSize);
      font-size: (14 / @rootSize);
      color:  #aaa;
      text-align: center;
      line-height: (31 / @rootSize);
    }
  }
  .task3 {
    display: flex;
    height: (91 / @rootSize);
    justify-content: space-between;
    align-items: center;
    border-bottom: (1 / @rootSize) solid #ebebeb;
    p:first-child {
      font-size: (14 / @rootSize);
      color: #535353;
      margin-bottom: (6 / @rootSize);
    }
    p:last-child {
      font-size: (12 / @rootSize);
      color: #aaa;
      span {
        color: #535353;
      }
    }
    div:last-child {
      width: (80 / @rootSize);
      height: (31 / @rootSize);
      border: (1 / @rootSize) solid #353535;
      border-radius: (15.5 / @rootSize);
      font-size: (14 / @rootSize);
      color:  #353535;
      text-align: center;
      line-height: (31 / @rootSize);
    }
  }
}
.footer2 {
  margin-top: (37 / @rootSize);
  height: (60 / @rootSize);
  line-height: (60 / @rootSize);
  text-align: center;
  img {
    display: inline-block;
  }
}